<template>
	<view class="points">
		<view class="header">
			<text class="title">积分</text>
		</view>
		
		<view class="points-info">
			<view class="points-card">
				<text class="points-label">当前积分</text>
				<text class="points-amount">{{ pointsInfo.currentPoints }}</text>
				<view class="points-tips">
					<text>可用积分：{{ pointsInfo.availablePoints }}</text>
					<text>即将过期：{{ pointsInfo.expiringPoints }}</text>
				</view>
			</view>
		</view>
		
		<view class="exchange-section">
			<text class="section-title">积分兑换</text>
			<view class="exchange-grid">
				<view v-for="item in exchangeItems" :key="item.id" class="exchange-item">
					<image class="item-image" :src="item.image" mode="aspectFill"></image>
					<view class="item-info">
						<text class="item-name">{{ item.name }}</text>
						<text class="item-points">{{ item.points }}积分</text>
					</view>
					<button class="exchange-btn" @click="exchangeItem(item)">兑换</button>
				</view>
			</view>
		</view>
		
		<view class="rules-section">
			<text class="section-title">积分规则</text>
			<view class="rules-list">
				<view v-for="rule in pointsRules" :key="rule.id" class="rule-item">
					<text class="rule-icon">{{ rule.icon }}</text>
					<view class="rule-content">
						<text class="rule-title">{{ rule.title }}</text>
						<text class="rule-desc">{{ rule.description }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="records-section">
			<view class="section-header">
				<text class="section-title">积分记录</text>
				<text class="view-all" @click="viewAllRecords">查看全部</text>
			</view>
			<view class="records-list">
				<view v-for="record in recentRecords" :key="record.id" class="record-item">
					<view class="record-info">
						<text class="record-type">{{ record.type }}</text>
						<text class="record-desc">{{ record.description }}</text>
						<text class="record-time">{{ record.time }}</text>
					</view>
					<text class="record-points" :class="{ positive: record.points > 0 }">
						{{ record.points > 0 ? '+' : '' }}{{ record.points }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const pointsInfo = ref({
	currentPoints: 2888,
	availablePoints: 2688,
	expiringPoints: 200
})

const exchangeItems = ref([
	{
		id: 1,
		name: '10元优惠券',
		points: 1000,
		image: '/static/goods/goods15.jpg'
	},
	{
		id: 2,
		name: '咖啡兑换券',
		points: 500,
		image: '/static/goods/goods14.jpg'
	},
	{
		id: 3,
		name: '精美礼品',
		points: 2000,
		image: '/static/goods/goods13.jpg'
	},
	{
		id: 4,
		name: '会员升级',
		points: 3000,
		image: '/static/goods/goods12.jpg'
	}
])

const pointsRules = ref([
	{ id: 1, icon: '⭐', title: '消费积分', description: '每消费1元获得1积分' },
	{ id: 2, icon: '⭐', title: '会员加倍', description: '会员等级越高，积分倍数越高' },
	{ id: 3, icon: '⭐', title: '积分有效期', description: '积分有效期为1年' },
	{ id: 4, icon: '⭐', title: '兑换规则', description: '100积分可兑换1元' }
])

const recentRecords = ref([
	{ id: 1, type: '消费获得', points: 88, description: '购买拿铁咖啡', time: '2024-01-15 14:30' },
	{ id: 2, type: '兑换消耗', points: -1000, description: '兑换10元优惠券', time: '2024-01-14 18:20' },
	{ id: 3, type: '签到获得', points: 10, description: '每日签到', time: '2024-01-14 09:00' },
	{ id: 4, type: '消费获得', points: 156, description: '购买套餐', time: '2024-01-13 19:45' }
])

const exchangeItem = (item) => {
	if (pointsInfo.value.availablePoints < item.points) {
		uni.showToast({
			title: '积分不足',
			icon: 'none'
		})
		return
	}
	
	uni.showModal({
		title: '确认兑换',
		content: `确定要兑换【${item.name}】吗？需要消耗 ${item.points} 积分`,
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '兑换成功',
					icon: 'success'
				})
				pointsInfo.value.currentPoints -= item.points
				pointsInfo.value.availablePoints -= item.points
			}
		}
	})
}

const viewAllRecords = () => {
	uni.showToast({
		title: '查看全部记录',
		icon: 'none'
	})
}
</script>

<style scoped>
.points {
	background: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.header {
	text-align: center;
	padding: 30rpx 0;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.points-info {
	margin-bottom: 40rpx;
}

.points-card {
	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
	border-radius: 20rpx;
	padding: 40rpx;
	color: #8b6914;
	text-align: center;
}

.points-label {
	font-size: 24rpx;
	opacity: 0.8;
	display: block;
	margin-bottom: 15rpx;
}

.points-amount {
	font-size: 56rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 25rpx;
}

.points-tips {
	display: flex;
	justify-content: space-around;
	font-size: 22rpx;
	opacity: 0.8;
}

.exchange-section,
.rules-section,
.records-section {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 25rpx;
	display: block;
}

.exchange-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.exchange-item {
	background: #f8f9fa;
	border-radius: 12rpx;
	padding: 25rpx;
	text-align: center;
}

.item-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-bottom: 15rpx;
}

.item-name {
	font-size: 24rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.item-points {
	font-size: 20rpx;
	color: #ff6b6b;
	display: block;
	margin-bottom: 15rpx;
}

.exchange-btn {
	background: #ffd700;
	color: #8b6914;
	border: none;
	border-radius: 20rpx;
	padding: 12rpx 24rpx;
	font-size: 22rpx;
	font-weight: bold;
}

.rules-list {
	display: flex;
	flex-direction: column;
	gap: 25rpx;
}

.rule-item {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.rule-icon {
	font-size: 40rpx;
	min-width: 60rpx;
}

.rule-content {
	flex: 1;
}

.rule-title {
	font-size: 24rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.rule-desc {
	font-size: 20rpx;
	color: #666;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25rpx;
}

.view-all {
	font-size: 24rpx;
	color: #667eea;
}

.records-list {
	display: flex;
	flex-direction: column;
	gap: 25rpx;
}

.record-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 25rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.record-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.record-info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.record-type {
	font-size: 26rpx;
	color: #333;
	margin-bottom: 5rpx;
}

.record-desc {
	font-size: 22rpx;
	color: #666;
	margin-bottom: 5rpx;
}

.record-time {
	font-size: 20rpx;
	color: #999;
}

.record-points {
	font-size: 28rpx;
	font-weight: bold;
	min-width: 100rpx;
	text-align: right;
}

.record-points.positive {
	color: #52c41a;
}

.record-points:not(.positive) {
	color: #ff4d4f;
}
</style>